import React, { Component } from 'react';
import { StyleSheet, Text, Keyboard, TextInput, View, Image, Dimensions, Platform, TouchableOpacity, StatusBar, Animated, KeyboardAvoidingView } from "react-native";
import { style } from '../../theme/style';

import { CodeStartCpt } from '../../component/CodeStartCpt';
import { CodeEndCpt } from '../../component/CodeEndCpt';
import { API, API_GENERATE } from '../../config/api';
import { PageStatusIndex } from '../../component/page-status/PageStatusIndex';
import ToastUtil from '../../utils/toast';
import HTTP from '../../utils/http'

const ScreenWidth = Dimensions.get('window').width;
const ScreenHeight = Dimensions.get('window').height;
const scale = ScreenWidth / 375;


export class PassWordPage extends Component {
	static navigationOptions = {
		header: null
	}
	requesting;
	constructor(props) {
		super(props);
		this.state = {
			onoff: true,
			phone: '',
			smsCode: '',
			resetPwdToken: '',
		}
		this._commit = this._commit.bind(this)
		this.isIOS = Platform.OS === 'ios';
		this.fromMarginTop = new Animated.Value(100 * scale);
	}

	componentWillMount () {
		this.keyboardWillShowSub = Keyboard.addListener(this.isIOS ? 'keyboardWillShow' : 'keyboardDidShow', this.keyboardWillShow);
		this.keyboardWillHideSub = Keyboard.addListener(this.isIOS ? 'keyboardWillHide' : 'keyboardDidHide', this.keyboardWillHide);
	}

	componentWillUnmount () {
		this.keyboardWillShowSub.remove();
		this.keyboardWillHideSub.remove();
	}

	keyboardWillShow = (event) => {
		Animated.parallel([
			Animated.spring(this.fromMarginTop, {
				duration: 300,
				toValue: 40 * scale,
			}),
		]).start()
	};

	keyboardWillHide = (event) => {
		Animated.parallel([
			Animated.spring(this.fromMarginTop, {
				duration: 300,
				toValue: 100 * scale,
			}),
		]).start()
	};

	_getData (obj) {
		this.setState(obj);
	}

	async	_commit () {
		if (this.requesting) return;
		Keyboard.dismiss();
		let { phone, smsCode } = this.state;
		if (!phone) {
			ToastUtil.showWarning('请输入手机号');
			return
		}
		if (!smsCode) {
			ToastUtil.showWarning('请输入验证码');
			return
		}
		this.setState({
			status: 'loading'
		})
		this.requesting = true;
		let Result = await HTTP.POST(API_GENERATE(API.PASSWORD_TOKEN), {
			mobile: phone,
			smsCode
		});
		if (Result) {
			this.requesting = false;
			this.props.navigation.navigate('SetPassWordPage', { resetPwdToken: Result.resetPwdToken });
		} else {
			this.requesting = false;
		}
		this.setState({
			status: 'data'
		})
	}

	render () {
		let { status } = this.state;
		return (
			<KeyboardAvoidingView style={[styles.container, { paddingTop: Platform.OS === 'ios' ? 24 : 0, backgroundColor: '#fff' }]}>
				<TouchableOpacity activeOpacity={1} style={{ height: ScreenHeight }} onPress={() => { Keyboard.dismiss() }}>
					<StatusBar backgroundColor='#fff' barStyle="default" />
					<TouchableOpacity style={styles.close} onPress={() => this.props.navigation.navigate('LoginPage')}>
						<Image source={require('../../imgs/close.png')} style={{ width: 18 * scale, height: 18 * scale }} />
					</TouchableOpacity>
					<Animated.Text style={[styles.title, { marginTop: this.fromMarginTop }]}>密码修改{this.state.onoff}</Animated.Text>
					<TouchableOpacity style={styles.listBox}>
						<Text style={styles.key}>手机号</Text>
						<View style={styles.valueBox}>
							<TextInput
								onChangeText={(val) => {
									this.setState({ phone: val })
								}}
								value={this.state.phone}
								maxLength={11}
								underlineColorAndroid='transparent'
								style={styles.inputPhone}
								keyboardType='numeric'
								placeholderTextColor="#BFBFBF"
								placeholder={"请输入手机号"}
							/>
							{this.state.onoff ? <CodeStartCpt phone={this.state.phone} onoff={this.state.onoff} _getData={this._getData.bind(this)} /> : <CodeEndCpt onoff={this.state.onoff} _getData={this._getData.bind(this)} />}
						</View>
					</TouchableOpacity>
					<View style={styles.listBox}>
						<Text style={styles.key}>验证码</Text>
						<View style={styles.valueBox}>
							<TextInput
								onChangeText={(val) => {
									this.setState({ smsCode: val })
								}}
								value={this.state.smsCode}
								maxLength={6}
								underlineColorAndroid='transparent'
								style={styles.inputPhone}
								keyboardType='numeric'
								placeholderTextColor="#BFBFBF"
								placeholder={"请填写验证码"}
							/>
						</View>
					</View>
					<TouchableOpacity style={[styles.commitBtnBox]} onPress={this._commit}>
						<Text style={styles.commitBtn} >下一步</Text>
					</TouchableOpacity>
				</TouchableOpacity>
				{
					status == 'loading' ? (<View style={{ position: 'absolute', height: ScreenHeight, width: ScreenWidth, top: 0 }}>
						<PageStatusIndex status={status} />
					</View>
					) : null
				}
			</KeyboardAvoidingView >
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#FAFBFD',
		paddingLeft: 25 * scale,
		paddingRight: 25 * scale,
	},
	title: {
		fontSize: 24 * scale,
		marginTop: 100 * scale,
		color: style.color.dark,
		marginBottom: 20 * scale
	},
	key: {
		fontSize: 13 * scale,
		color: style.color.dark,
	},
	listBox: {
		marginTop: 20 * scale
	},
	valueBox: {
		width: '100%',
		height: 45 * scale,
		borderBottomWidth: 1,
		borderStyle: 'solid',
		borderBottomColor: style.color.border,
		flexDirection: 'row',
	},
	inputPhone: {
		flex: 1,
		fontSize: 14 * scale,
		padding: 0,
		width: '100%',
		height: 45 * scale,
		borderWidth: 0,
	},
	commitBtnBox: {
		width: 322 * scale,
		height: 44 * scale,
		backgroundColor: style.color.themeColor,
		borderRadius: 100 * scale,
		justifyContent: 'center',
		alignItems: 'center',
		marginTop: 43 * scale
	},
	commitBtn: {
		color: style.color.white,
		fontSize: 14 * scale
	},
	close: {
		marginTop: 24 * scale
	}
})